<template>
  <div id="wrap">
    <section class="mode_title list-banner">
      <p>国学</p>
    </section>
    <section class="mode-list">


      <div class="mode-list-hd clearfix">
        <button class="rb-right add-btn" type="button">恢复默认列表</button>
      </div>

      <div class="mode-list-bd show-transition">
        <ul>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>师徒得道</p>
                <span class="single-time">7分22秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>a o e</p>
                <span class="single-time">1分2秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>i u ü y w yu</p>
                <span class="single-time">2分38秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>古诗词三首</p>
                <span class="single-time">1分24秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>桂林山水</p>
                <span class="single-time">2分35秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>记金华双龙洞</p>
                <span class="single-time">5分13秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>七月的天山</p>
                <span class="single-time">3分20秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>我的“长生果”</p>
                <span class="single-time">8分58秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>中彩那天</p>
                <span class="single-time">3分49秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
          <li>
            <a class="mode-df">

              <!-- play -->
              <button class="ui-play" type="button">
                <i class="play-icon"></i>
              </button>

              <!-- pause -->
              <button class="ui-stop" type="button" style="display: none;">
                <i class="stop-icon"></i>
              </button>

              <!-- resume -->
              <button class="ui-play" type="button" style="display: none;">
                <i class="play-icon"></i>
              </button>


              <div class="mode-inner">
                <p>万年牢</p>
                <span class="single-time">4分48秒</span>
              </div>
              <div class="mode-control">
                <!-- 收藏 -->
                <button class="favorites-btn" type="button">
                  <i class="fav-icon"></i>
                </button>
                <!-- 已收藏 -->
                <button class="favorites-btn favorites-btn-active" type="button" style="display: none;">
                  <i class="fav-icon"></i>
                </button>
                <button class="close-btn" type="button">
                  <i class="close-icon"></i>
                </button>
              </div>
            </a>
          </li>
        </ul>
        <div class="loading-more">
          <a>加载更多</a>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {

    }
  }
</script>
<style>

</style>
